React HooksのTest

個別のAPI referrenceはあるが、小さな例とかがない

code:ts

test('should increment counter from custom initial value', () => {

const { result } = renderHook(() => useCounter(9000))

act(() => {

result.current.increment()

})

expect(result.current.count).toBe(9001)

})

引数を変えて再renderingさせたいとき

code:ts

test('should reset counter to updated initial value', () => {

const { result, rerender } = renderHook(({ initialValue }) => useCounter(initialValue), {

initialProps: { initialValue: 0 }

})

rerender({ initialValue: 10 })

act(() => {

result.current.reset()

})

expect(result.current.count).toBe(10)

})

code:ts

test('should clean up side effect', () => {

let id = 'first'

const { rerender } = renderHook(() => {

useEffect(() => {

sideEffect.start(id)

return () => {

sideEffect.stop(id) // this id will get the new value when the effect is cleaned up

}

})

id = 'second'

rerender()

expect(sideEffect.get('first')).toBe(false)

expect(sideEffect.get('second')).toBe(true)

})

hooks Aが、Hook Bに依存している時に、Bのspyを作ってAをテストしたい

RenderResult

非同期処理

renderHookの中にある

Error

project内でこの書き方してるところ全てにこの修正を施すと直った

異常系のテストを書きたい